
import React, {useEffect,useState} from 'react'

//什么情况是副作用  dom的操作 异步数据的获取都可以称之为副作用
//useEffect初始化会执行
//useEffect可以当成componentDidMount componentWillUnmount componentDidUpdate来使用
//函数组件内部状态更新的时候 这个钩子useEffect也会执行

    const UseEffectHook = ()=>{
        //统计次数
        let [count,setCount] = useState(1)
        //申明一个购物车数据的state
        let [product, setProduct] = useState([])

        useEffect(()=>{
            console.log("useEffect执行了");
            //修改dom的标题
            document.title = `你点击了${count}次`
        })

        //需求 从服务器获取数据 并且渲染
        //一个注意点就是  多种副作用的操作 不能应该值放到一个effect里面
        //effect是可以多次调用的 不同副作用逻辑应该放在不同的effect函数中进行处理
        useEffect(()=>{
            fetch("http://chst.vip/data/index.json")
            .then(body=>body.json())
            .then(res=>{
                console.log(res);
                setProduct(res.data)
            })
        },[])

        return(
            <fieldset>
                <legend>useEffectHook</legend>
                <h1>副作用:{count}</h1>
                <button onClick ={()=>{
                    setCount(count+1);
                }}>点击</button>
                <hr />
                <ul>
                    {
                        product.map(item=><li key={item.id}>{item.title}</li>)
                    }
                </ul>
            </fieldset>
        )
    }

    export default UseEffectHook